<template>
  <div style="padding-bottom: 150px;">
    <wan-shan></wan-shan>
    <van-checkbox-group v-model="result" ref="checkboxGroup">
      <van-checkbox
        :name="item.id"
        @click="checkboxClick(item)"
        v-for="item in cartList"
        :key="item.id"
        :disabled="editStatus"
      >
      <van-swipe-cell>
        <van-card
          :num="item.number"
          :price="item.retail_price.toFixed(2)"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        >
          <template #footer>
            <van-stepper
              v-model="item.number"
              v-if="editStatus"
              @change="stepChange(item)"
              min="1"
            />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delProduct(item.product_id)" />
        </template>
      </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar :price="cartTotal.checkedGoodsAmount*100" button-text="下单" @submit="onSubmit">
      <van-checkbox v-model="checkAll" @click="checkAllFn">全选</van-checkbox>
      <template #tip>
        累计共613件商品，可点击
        <van-button
          :type="editStatus ? 'danger' : 'primary'"
          size="small"
          @click="editStatus = !editStatus"
        >{{editStatus ? '完成编辑' : '编辑'}}</van-button>按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>
 
<script>
import { GetCartDataAPI, SelectedGoodsAPI, StepAPI, DelProductAPI } from "@/request/api";
import WanShan from "@/components/WanShan";
export default {
  components: {
    WanShan,
  },
  created() {
    GetCartDataAPI().then((res) => {
      console.log(res.data);
      if (res.errno == 0) {
        this.totalFn(res.data);
      }
    });
  },
  data() {
    return {
      // 购物车总数据
      cartTotal: {},
      // 购物车数组列表
      cartList: [],
      // checkbox复选框组的值
      // result数组中的值要跟name的值对应上，此时表示选中
      result: [],
      // 全选
      checkAll: false,
      // 编辑状态(false代表没有处于编辑状态)
      editStatus: false,
    };
  },
  methods: {
    onSubmit() {},
    // 步进器点击事件
    stepChange(item) {
      StepAPI({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
    // 单个复选框点击事件
    checkboxClick(item) {
      let arr = [];
      // this.cartList.map((val) => {
      //   // product_id
      //   if (item.id == val.id) {
      //     arr.push(val.product_id);
      //   }
      // });
      arr.push(item.product_id);
      // editStatus为真，表示显示步进器，此时阻止当前复选框点击事件
      if (this.editStatus) {
        return;
      } else {
        // 发送请求
        SelectedGoodsAPI({
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: arr.join(),
        }).then((res) => {
          if (res.errno == 0) {
            this.totalFn(res.data);
          }
        });
      }
    },
    // 封装一个公用的函数
    totalFn(obj) {
      this.result = [];
      let { cartTotal, cartList } = obj;
      this.cartTotal = cartTotal;
      this.cartList = cartList;
      this.cartList.map((val) => {
        if (val.checked == 1) {
          this.result.push(val.id);
        } else {
          this.result.push("");
        }
      });
      this.checkAll =
        this.cartTotal.goodsCount == this.cartTotal.checkedGoodsCount;
    },
    // 点击了全选复选框
    checkAllFn() {
      let arr = [];
      this.cartList.map((val) => {
        arr.push(val.product_id);
      });

      SelectedGoodsAPI({
        isChecked: this.checkAll ? 1 : 0,
        productIds: arr.join(),
      }).then((res) => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
    // 删除商品
    delProduct(id){
      DelProductAPI({
        productIds: id.toString()
      }).then(res=>{
        if(res.errno==0){
          this.totalFn(res.data);
        }else{
          this.$toast('删除失败')
        }
      })
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  background: #fff;
  .van-checkbox {
    border-bottom: 1px solid #ccc;
    padding: 10px 4%;
  }
  /deep/.van-checkbox__label {
    flex: 1;
  }
}

.van-submit-bar {
  bottom: 49px;
  border-bottom: 1px solid #ccc;
}

.van-swipe-cell__right{
  .van-button{
    height: 100%;
  }
}
</style>